import Vue from 'vue'
import {registerApplication, start} from 'single-spa';

import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

async function loadScript(url){
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

registerApplication(
  'myVueApp',
  async () => {
    console.log('加载模块');
    await loadScript(`http://localhost:10000/js/chunk-vendors.js`);
    await loadScript(`http://localhost:10000/js/app.js`);
    return window.singleVue; // bootstrap mount unmount
  },
  location => location.pathname.startsWith('/vue') //路径切换到什么的时候就加载注册的该应用
  /*,CustomPropsOrFn*/
);
start();

//todo
// 1.single-spa 需要我们手动的指定需要加载的标签, 但实际中这很难一个个指定
// 2.样式不隔离、没有js沙箱机制


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
